<template>
  <div class="">
    <head-nav></head-nav>
    <!-- 占位 -->
    <div class="zanwei-top"></div>
    <!-- <div class="rapdetail" v-if="itemObj">
          <div class="ph_faddish">
            <img :src="itemObj.TP[0]" />
          </div>
          <div class="name_faddish">
            <h3 class="tit">{{itemObj.SPMC}}</h3>
            <ul>
              <router-link class="rap_rout" :to="{path:'/rappay'}" tag="div">
                <li class="btn_faddish" @click="exchangeFn(itemObj.XJ, itemObj.ID)">立即抢购</li>
              </router-link>
              <li class="price">
                <div>原价 {{itemObj.JE }}</div>
                <p>现价 {{itemObj.XJ}}</p>
              </li>
            </ul>
          </div>
          <div class="detail_faddish contentA">
            <div v-html="itemObj.MS"></div>
          </div>
        </div> -->
    <!-- new weigang start -->
    <div class="hbbox">
      <div class="topimg">
        <!-- <img :src="itemObj.TP[0]" > -->
        <mt-swipe :auto="4000">
          <mt-swipe-item
            v-for="(item,index) in itemObj.XQT"
            :key="index"
          ><img :src="item"></mt-swipe-item>
        </mt-swipe>
      </div>
      <div class="title">
        {{itemObj.SPMC}}
      </div>
      <div class="detailsm">
        <div
          class="jg"
          v-if="itemObj.XJ!=0 && itemObj.JF==0"
          :style="textColor"
        >
          ￥{{itemObj.XJ}}<span
          v-if="(itemObj.XJ!=itemObj.JE && itemObj.JE!=0 && itemObj.JE!=null)"> 原价 {{itemObj.JE }}</span>
        </div>
        <div
          class="jg"
          v-else-if="itemObj.XJ==0 && itemObj.JF!=0"
          :style="textColor"
        >
          {{itemObj.JF}}积分
        </div>
        <div
          class="jg"
          :style="textColor"
          v-else-if="itemObj.XJ!=0 && itemObj.JF!=0"
        >
          ￥{{itemObj.XJ}}<span
          v-if="(itemObj.XJ!=itemObj.JE && itemObj.JE!=0 && itemObj.JE!=null)"> 原价 {{itemObj.JE }}</span>
        </div>
        <div
          class="jg"
          :style="textColor"
          v-else
        >
          ￥{{itemObj.XJ}}
        </div>
        <div class="jf">
          剩余<span :style="textColor">{{itemObj.KC}}</span>
        </div>
      </div>
      <div
        class="zsjf1"
        v-if="itemObj.JF"

      >
        {{itemObj.JF}}积分
      </div>
      <div class="line20"></div>

      <div
        class="zsjf"
        v-if="itemObj.ZSJF"
      >
        赠送<span>{{itemObj.ZSJF}}</span>积分
      </div>
      <!-- <div class="spms">
              {{itemObj}}
            </div> -->
      <!-- <div class="spjssm" v-html="itemObj.MS">

            </div>-->

      <mt-navbar v-model="selected">
        <mt-tab-item id="1">商品详情</mt-tab-item>
        <mt-tab-item id="2">兑换须知</mt-tab-item>
      </mt-navbar>
      <div class="xqxz">
        <!-- tab-container -->
        <mt-tab-container v-model="selected">
          <mt-tab-container-item id="1">
            <div
              class="spdetail contentA"
              v-html="itemObj.MS"
            ></div>
          </mt-tab-container-item>
          <mt-tab-container-item id="2">
            <!-- {{itemObj.DHGZ}} -->
            <div
              class="contentA"
              v-html="itemObj.DHGZ"
            ></div>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
    </div>
    <div
      class="footbuy"
      @click="exchangeFn2(itemObj.XJ, itemObj.ID)"
      :style="backgroundColor"
    >
      立即抢购
    </div>

    <!-- 完善信息弹出层 -->
    <div
      class="zccg"
      v-show="cgts"
    >
      <div class="zccgbox">
        <div class="tstitle">请完善信息</div>
        <div
          class="close"
          @click="closefn"
        >
          <i class="iconfont icon-close"></i>
        </div>
        <div class="tscontent">
          <ul>
            <!--<li>
                        <mt-field placeholder="请输入您的姓名" v-model="userlist.name" type="text"> </mt-field>
                    </li>-->
            <li>
              <mt-field
                placeholder="请输入您的身份证号码"
                v-model="userlist.idcard"
                type="text"
              ></mt-field>
            </li>
          </ul>

        </div>
        <div class="tsms">
          <!--因涉及到个人财务安全，请填写正确的个人信息！-->
          为保证您购买安全，请持本人身份证及手机核销
        </div>
        <div class="zcbtn">
          <mt-button
            type="primary"
            size="large"
            @click.native="wsxxfn(itemObj.XJ, itemObj.ID)"
          >保存
          </mt-button>
        </div>
      </div>
      <!-- 背景 -->
      <div class="zccgbg"></div>
    </div>
    <!--底部占位-->
    <div class="zanwei-bottom"></div>
    <!-- 数量 -->
    <mt-popup
      class="sd_spec"
      v-model="specShow"
      position="bottom"
    >
      <div class="title">
        <span
          class="name"
          v-if="itemObj && itemObj.SPMC != null"
        >{{itemObj.SPMC}}</span>
        <span class="price" :style="textColor">¥{{sumAll}}</span>
        <div
          class="close"
          @click="speClose"
        ><i class="iconfont icon-close"></i></div>
      </div>
      <div class="numb">
        <span>请选择数量</span>
        <ul>
          <li
            class="ico lef"
            @click="subNum"
          ><i class="iconfont icon-jianhao"></i></li>
          <li class="ico mid">{{number}}</li>
          <li
            class="ico rig"
            @click="addNum"
          ><i class="iconfont icon-jiashangplus33"></i></li>
        </ul>
      </div>
      <div
        class="qgbtn"
        @click="exchangeFn(itemObj.XJ, itemObj.ID)"
        :style="backgroundColor"
      >立即抢购
      </div>
    </mt-popup>
  </div>
</template>

<script>
  import api from '@/api/api'
  import pay from '@/api/pay'
  import {MessageBox, Swipe, SwipeItem, Toast} from 'mint-ui';

  export default {
    data() {
      return {
        itemObj: {},
        cgts: false,
        selected: '1',
        userlist: {
          name: '',
          idcard: '',
          address: ''

        },
        specShow: false,
        buy: '',
        number: 1,
        // 	img: 'http://www.rtaksoft.com:3200/res/form/2c91a36a63d4cc100163dd9bc49e01ee/297eb6155f35043d015f3505adfd0004/4415820180609112851732.jpg',
        // 	title: '乐宾9周年 店庆预售卡',
        // 	img2: 'http://www.rtaksoft.com:3200/res/form/2c91a36a63d4cc100163dd9bc49e01ee/297eb6155f35043d015f3505adfd0004/1424420180608122452695.png',
        // 	yjje: 800,
        // 	xjje: 600
        // },
        // htmlMsg: "<p style='margin-bottom: 5px; text-align: center;'>此商品物超所值，赶快行动吧!</p><p style='margin-bottom: 5px; text-align: center;'><img src='http://www.rtaksoft.com:3200/res/form/2c91a36a63d4cc100163dd9bc49e01ee/297eb6155f35043d015f3505adfd0004/9864120180608121647134.png'/><br/></p><p style='margin-bottom: 5px; text-align: center;'><strong>此商品你值得拥有!</strong></p>",
      }
    },
    computed: {
      sumAll() {
        if (this.itemObj && this.itemObj.XJ != null) {
          return (this.itemObj.XJ * this.number).toFixed(2)
        }
      }
    },
    methods: {
      exchangeFn2() {
        let userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
        if (userinfo == null || userinfo.vipcode === "") {
          // 未登录
          Toast({
            message: "您还不是会员，快去注册吧！",
            duration: 1200
          });
          setTimeout(function () {
            //that.$router.push('/register')
            that.$router.push({
              path: "/register",
              query: {
                type: "scoredetail"
              }
            });
          }, 1500);
          return;
        }
        let kc = this.itemObj.KC;
        let sfxg = this.itemObj.SFXG;
        let mrxggs = this.itemObj.MRXGGS;
        if (kc <= 0) {
          Toast({
            message: '抱歉, 已售完',
            duration: 1500,
            className: 'myTisMask'
          })
          return;
        }
        if (sfxg == 1 && mrxggs <= 0) {
          Toast({message: "您已达到购买上限", duration: 1500, className: "myTisMask"});
          return;
        }
//          	if (this.buy === 'buy0') {
//          		let id = this.itemObj.ID;
//          		let xj = this.itemObj.XJ;
//          		this.exchangeFn(xj,id);
//          	} else {
//          		this.specShow = true;
//          	}
        this.specShow = true;
      },
      exchangeFn(xj, lpid) {
        let page = this;
        let lpsl = this.number;
        let buy = this.buy;
        this.specShow = false;
        //规格
//              page.specShow = true;
//              return false;
        // 检查过期
        let userinfo = JSON.parse(sessionStorage.getItem('userinfo'));
        if (userinfo && userinfo.vipcode) {
          if (!this.$util.checkValidity()) {
            return
          }
          api.scoreToGiftDetail(page, userinfo.vipcode, lpid, cb);

          function cb(re) {
            if (re.code !== 0) {
              Toast({
                message: re.msg,
                duration: 2000
              });
              setTimeout(function () {
                page.$router.go(-1);
              }, 2000);
            } else {

              if (userinfo && userinfo.vipcode) {
                //校验5元抢
                pay.ck5yq(page, lpid, (res_5yq) => {
                  let data_5yq = res_5yq.data;
                  if (data_5yq.code == 0) {
                    // 查询是否填写了身份证和地址
                    api.getUserInfo(page, function (res) {
                      let data = res.data;
                      console.log(res, "查询是否填写了身份证和姓名");
                      if (data.code == 0) {
                        MessageBox.confirm('确定下单吗?', '温馨提示').then(action => {
                          if (action === 'confirm') {
                            if (xj > 0) {
                              page.$router.push({
                                path: '/rappay/',
                                query: {
                                  lpid: lpid,
                                  lpsl: lpsl
                                }
                              })
                            } else {

                              api.scoreCreateOrder(page, userinfo.vipcode, lpid, lpsl, buy, cb)

                              function cb(res) {
                                console.log('生订单')
                                console.log(res)
                                if (res.code == 0) {
                                  let insertObj = {
                                    pdid: res.data
                                    // rowobj: this.rowobj
                                  }
                                  page.$router.push({
                                    path: '/scorecreate',
                                    query: {
                                      create: insertObj
                                    }
                                  })
                                } else {
                                  Toast({
                                    message: res.msg,
                                    duration: 3000
                                  });
                                }

                              }
                            }
                            page.number = 1;
                          }
                        });

                      } else if (data.code === 9999) {
                        //orcal数据库异常 关闭当前窗口
                        MessageBox.alert(data.msg, '温馨提示').then(action => {
                          wx.closeWindow()
                        })
                      } else {
                        page.Toastfn(data.msg, 2000);
                      }
                    })
                  } else {
                    //提醒已经抢购了
                    page.Toastfn(data_5yq.msg, 2000);
                  }
                })


              } else {

              }
            }
          }
        } else {
          Toast({
            message: '您还不是会员，快去注册吧！',
            duration: 2000
          });
          setTimeout(function () {
            page.$router.push({path: '/register', query: {type: 'faddishdetail'}});
          }, 2000)
          return;
        }


      },
      /**
       * @param ID 礼品ID
       */
      getGiftDetailFn(userId, id) {
        let page = this
        api.scoreToGiftDetail(page, userId, id, cb)

        function cb(res) {
          if (res.code == 0) {
            let data = JSON.parse(res.data)
            console.log(data)
            page.$store.state.title = data.SPMC
            let TP = data.TP.map(x => {
              return page.host.filehost + x
            })
            data.TP = TP
            let XQT = data.XQT.map(x => {
              return page.host.filehost + x
            })
            data.XQT = XQT

            page.itemObj = data

            page.$nextTick(function () {
              uParse('.contentA', {
                rootPath: '/static/libs/ueditor/'
              })
            });

          } else {
            Toast({
              message: res.msg,
              duration: 2000
            });
            setTimeout(function () {
              page.$router.go(-1);
            }, 2000);
          }

        }
      },
      // 提示函数
      Toastfn(message, duration, position) {
        Toast({
          message: message,
          duration: duration,
          position: position
        });
      },
      // 关闭弹出层
      closefn() {
        let page = this;
        page.cgts = false;
      },
      // 保存完善信息
      wsxxfn(xj, lpid) {
        let page = this;
        let lpsl = this.number;
        let buy = this.buy;
        this.specShow = false;
//              (this.userlist.name == "") {
//                  page.Toastfn("请输入您的姓名",2000);
//              } else if
        if (this.userlist.idcard == "") {
          page.Toastfn("请输入您的身份证号码", 2000);
        } else if (this.userlist.idcard.length != 18) {
          page.Toastfn("请输入正确的身份证号码", 2000);
        } else {
          let fromdata = {
            name: this.userlist.name || '',
            idcard: this.userlist.idcard,
            address: this.userlist.address || '',
          }
          // 更新获取用户信息
          api.updateHyInfo(this, fromdata, function (res) {
            let data = res.data;
            console.log(res);
            if (data.code == 0) {
              console.log('更新成功');
              // 关闭完善信息
              page.cgts = false;
              // if (true) {
              MessageBox.confirm('确定下单吗?', '温馨提示').then(action => {
                if (action === 'confirm') {
                  if (xj > 0) {
                    page.$router.push({
                      path: '/rappay/',
                      query: {
                        lpid: lpid,
                        lpsl: lpsl
                      }
                    })
                  } else {
                    let page = this
                    let userinfo = JSON.parse(sessionStorage.getItem('userinfo'));
                    api.scoreCreateOrder(page, userinfo.vipcode, lpid, lpsl, buy, cb)

                    function cb(res) {
                      console.log('生订单')
                      console.log(res)
                      if (res.code == 0) {
                        let insertObj = {
                          pdid: res.data
                          // rowobj: this.rowobj
                        }
                        page.$router.push({
                          path: '/scorecreate',
                          query: {
                            create: insertObj
                          }
                        })
                      } else {
                        Toast({
                          message: res.msg,
                          duration: 3000
                        });
                      }

                    }
                  }
                  page.number = 1;
                }
              });
            } else {
              page.Toastfn(data.msg, 2000);
            }
          })

        }

      },
      // 数量减
      subNum() {
        if (this.number > 1) {
          this.number -= 1
        } else {
          Toast({
            message: '数量最少为1',
            duration: 1500,
            className: 'myTisMask'
          })
        }
      },
      // 数量加
      addNum() {
        let kc = this.itemObj.KC;
        let sfxg = this.itemObj.SFXG;
        let mrxggs = this.itemObj.MRXGGS;
        if (this.number < kc) {
          if (sfxg == 1) {//0不限购 1 限购
            if (this.number < mrxggs) {
              this.number += 1;
            } else {
              if (mrxggs <= 0) {
                Toast({message: "您已达到购买上限", duration: 1500, className: "myTisMask"});
              } else {
                Toast({message: "限购" + mrxggs + "个", duration: 1500, className: "myTisMask"});
              }

            }
          } else {
            //不限购
            this.number += 1;
          }
        } else {
          Toast({
            message: '库存不足',
            duration: 1500,
            className: 'myTisMask'
          })
        }
      },
      // 关闭规格层
      speClose() {
        this.specShow = false;
      },
    },
    mounted() {
      let id = this.$route.params.id
      this.pdid = id
      let payTis = this.$route.query.payTis;
      if (payTis === 'buy0') {
        this.buy = 'buy0';
      }
      let userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
      if (userinfo && userinfo.vipcode) {
        let userId = userinfo.vipcode
        this.getGiftDetailFn(userId, id)
      }
    }
  }

</script>

<style lang="less">
  li {
    list-style: none;
  }

  .insetbox2 {
    // padding: 0 0.2rem;
    // padding-top: 0.15rem;
    background-color: #e9e9e9;
  }

  .rapdetail {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.4rem 0.3rem;

    .ph_faddish {
      img {
        width: 6.20rem;
        height: 6.20rem;
      }
    }

    .name_faddish {
      margin: 0.38rem 0;
      width: 6.2rem;
      border-top: 0.04rem solid #e2e2e2;
      border-bottom: 0.04rem solid #e2e2e2;
      padding: 0.05rem 0;

      .tit {
        font-size: 0.3rem;
        color: #e20010;
        line-height: 0.5rem;
      }

      ul {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.1rem 0;

        .btn_faddish {
          width: 2.6rem;
          height: 0.88rem;
          border-radius: 0.12rem;
          line-height: 0.88rem;
          text-align: center;
          color: #fff;
          font-size: 0.4rem;
          background-color: #F05DC4;
        }

        .price {
          margin-left: 0.4rem;
          color: #aeaeae;

          div {
            font-size: 0.24rem;
            line-height: 0.4rem;
            text-align: left;
          }

          p {
            font-size: 0.38rem;
            line-height: 0.54rem;
            color: #747273;
          }
        }
      }
    }

    .detail_faddish {
    }
  }

  // newweigang
  .hbbox {
    .topimg {
      height: 4rem;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      font-weight: bold;
      font-size: .36rem;
      padding: .2rem .2rem .1rem .2rem;
    }

    .detailsm {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // border-bottom: 8px solid #f4f4f4;
      .jg {
        color: #F05DC4;
        font-size: .42rem;
        font-weight: bold;
        padding: .2rem .2rem .2rem .2rem;

        span {
          font-size: .28rem;
          text-decoration: line-through;
          color: #999999;
          margin-left: .5rem;
        }
      }

      .jf {
        padding-right: .2rem;
        font-size: .28rem;
        color: #666666;

        span {
          color: #F05DC4;
        }
      }

    }

    .zsjf {
      border-bottom: 1px solid #f4f4f4;
      padding: .2rem .2rem .2rem .2rem;
      color: #F05DC4;
      font-size: .30rem;

      span {
        color: #F05DC4;
        font-size: .30rem;
      }
    }

    .zsjf1 {
      border-bottom: 1px solid #f4f4f4;
      padding: 0rem .2rem .2rem .2rem;
      color: #999999;
      font-size: .30rem;

    }

    .spjssm {
      border-bottom: 8px solid #f4f4f4;
      padding: .1rem .2rem .3rem .2rem;
      color: #666666;
    }

    .xqxz {
      padding: 10px;
    }
  }

  .footbuy {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: #F05DC4;
    color: #fff;
    height: 48px;
    line-height: 48px;
    font-size: 18px;
  }

  // 提示
  .zccg {
    width: 100%;
    top: 0;

    .zccgbox {
      // padding-top: 0.7rem;
      position: absolute;
      border-radius: 5px;
      z-index: 10;
      width: 80%;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      // height: 7.5rem;
      height: 5rem;
      background-color: #ffffff;
      // color: #ffffff;
      text-align: center;
      color: #333333;

      .close {
        position: absolute;
        right: 8px;
        top: 8px;

        .iconfont {
          font-size: 20px;
          color: #666666;
        }
      }

      .tstitle {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        padding: 12px;
      }

      .tsms {
        font-size: 14px;
        color: #666666;
        padding: 10px 26px 20px 26px;
      }

      .tscontent {
        ul {
          li {
            border: 1px solid #e6e6e6;
            margin: 10px;
            border-radius: 5px;
            overflow: hidden;
          }
        }
      }

      .zcbtn {
        margin: 0 10px;
      }
    }

    .zccgbg {
      background-color: #000000;
      position: fixed;
      opacity: 0.5;
      width: 100%;
      height: 100vh;
      top: 0;
      z-index: 9;
    }
  }

  .sd_spec {
    width: 100%;
    padding-top: 0.3rem;

    .title {
      padding: 0 0.3rem;
      font-size: 0.36rem;
      line-height: 0.8rem;
      font-weight: bold;
      position: relative;
      align-items: center;
      display: flex;

      .name {
        max-width: 4.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .price {
        color: #ee0017;
        margin-left: 0.15rem;
      }

      .close {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 50%;
        border: 0.01rem solid #dcdcdc;
        text-align: center;
        line-height: 0.6rem;
        position: absolute;
        top: -0.1rem;
        right: .3rem;
        color: #dcdcdc;

        i {
          font-size: 0.3rem;
        }
      }
    }

    .hasxz {
      padding: 0 0.3rem;
      height: 0.5rem;
      display: flex;
      align-items: center;

      .selBox {
        margin: 0 0.1rem
      }
    }

    .types {
      padding: 0 0.3rem;
      padding-bottom: 0.15rem;

      .tit {
        line-height: 0.6rem;
        font-size: 0.28rem;
      }

      .ilist {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        .item {
          width: 1.56rem;
          height: 0.7rem;
          border: 0.01rem solid #e6e6e6;
          border-radius: 0.06rem;
          font-size: 0.26rem;
          margin-bottom: 0.1rem;
          text-align: center;
          line-height: 0.7rem;
        }

        li.selit {
          background-color: #f05dc4;
          color: #FFFFFF;
        }
      }
    }

    .numb {
      border-top: 0.01rem solid #e6e6e6;
      height: 1rem;
      padding: 0 0.27rem 0 0.42rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        font-size: 0.34rem;
      }

      ul {
        display: flex;
        align-items: center;

        li {
          font-size: 0.36rem;
          width: 0.64rem;
          height: 0.64rem;
          line-height: 0.62rem;
          text-align: center;
        }

        .lef, .rig {
          font-size: 0.5rem;
          border-radius: 50%;
          background-color: #f0f0f0;
          color: #b3b3b3;
        }

        .mid {
          margin: 0 0.05rem;
          line-height: 0.64rem;
        }

        li.addsub {
          color: #f05dc4;
        }
      }
    }

    .qgbtn {
      width: 100%;
      height: 0.96rem;
      line-height: 0.96rem;
      text-align: center;
      font-size: 0.34rem;
      color: #FFFFFF;
      background-color: #f05dc4;
    }
  }
</style>
